<template>
  <div class="login">
    <el-card class="box-card">
      <template #header>
        <div class="clearfix">
          <span>学生后台管理系统</span>
        </div>
      </template>

      <!-- <el-form label-width="80px" :model="form" ref="form" :rules="rules">
        <el-form-item label="用户名" class="item" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" class="item">
          <el-input type="password" v-model="form.password"></el-input> -->
      <el-form
        label-width="80px"
        :model="userInfo"
        ref="ref_form"
        :rules="rules"
        :label-position="labelPosition"
      >
        <el-form-item label="用户名" prop="user_name" class="item" >
          <el-input v-model.trim="userInfo.user_name">
            <template #prepend>
              <el-icon><Avatar /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="user_password" class="item" >
          <el-input show-password v-model.trim="userInfo.user_password">
            <template #prepend>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary"  round class="loginBtn" @click="onLogin">登录</el-button>
          <el-button type="primary" round class="loginBtn" @click="onRegister">注册</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>


<script setup>
import router from "../router/index";
import { reactive,ref } from "vue";
import { ElMessage } from "element-plus";
// 引入接口文件（登录接口）
import { getLogin } from '@/api/api.js'
const labelPosition = ref('right')
const ref_form = ref(null)
const roleid=ref(0)
const userInfo = reactive({
  user_name: "",
  user_password: "",
});
const rules = {
  user_name:[{required:'true',trigger:'blur',message:'用户姓名不能为空'}],
  user_password:[{required:'true',trigger:'blur',message:'用户密码不能为空'}]
}
const onLogin = () => {
  ref_form.value.validate((val) => {
    console.log(val + "用户");
    console.log(val + "onLogin");
    if (val) {
      getLoginData();
    }
  });
};
const getLoginData = async () => {
  const res = await getLogin({
    user_name: userInfo.user_name,
    user_password: userInfo.user_password,
  });
  console.log("登录的信息");
  console.log(res.data);

  if (res.data.code===0) {
    console.log(res.data.message);
    localStorage.setItem("token", res.data.data.token);
    localStorage.setItem("user_roleid", res.data.data.StudentRoleId);
    roleid.value = Number(res.data.data.StudentRoleId);
    ElMessage({
    message: res.data.message,
    type: "success",
  });
  console.log("跳转");
  router.push("/home");
  }else{
    ElMessage({
    message: res.data.message,
    type: "warning",
  });
  }
 
};
const onRegister=()=>{
  router.push('/register')
}
</script>
<style lang="less">
.login {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("../assets/ba.png") no-repeat;
  background-size: 100% 100% ;
  background-attachment: fixed;
  .clearfix {
    font-size: 30px;
  }
  .el-card {
    background-color: #4c9ee657;
  }
  .box-card {
    width: 450px;
    margin: 200px auto;
    color: #fff;
    border-radius: 10px;
    .item .el-form-item__label{
      color:#fff
    }
    .el-card__header {
      font-size: 34px;
    }
    .btns{
      margin-left:63px;
      .loginBtn{
      width: 70px;
    }
    }
    
    
  }
}
</style>